import { useEffect, useState } from "react"
const ModifyTitle = props => {
    let [count, setCount] = useState(20)
    let [msg,setMsg]=useState(17)
    let [cart,setCart]=useState([])
    function click() {
        setCount([++count])
    }
    function click1(){
        setMsg([++msg])
    }
    //修改浏览器标题属于副作用，需要使用到useEffect
    useEffect(function(){
        document.title=count
        return function(){
            document.title="您已经离开了页面"
        }
    },[count])
    useEffect(()=>{
        fetch("http://chst.vip:8081/data/index.json")
        .then(body=>body.json())
        .then(res=>{
          console.log(res.data)
            setCart(res.data)
        })
    },[])
    return (
        <fieldset>
            <legend>修改浏览器标题:{msg}</legend>
            <button onClick={click}>点击修改浏览器标题</button>
            <button onClick={click1}>点击改变msg</button>
            <ul>
                {
                    cart.map(item=>{
                        return <li key={item.id}>{item.title}</li>
                    })
                }
            </ul>
        </fieldset>
    )
}
export default ModifyTitle